<template>
  <div class="login-dropdown" v-show="showDropdrow">
    <div class="webcahtStatus">
      <span class="switch-label">在线</span>
      <el-switch v-model="loginWebchatStatus" @change="changeWebchatLoginStatus" class="fr" active-color="#2ED47A" active-text="空闲"></el-switch>
    </div>
    <span class="switch-label">通话</span>
    <el-switch v-model="loginStatus" @change="changeLoginStatus" class="fr" active-color="#2ED47A" active-text="空闲"></el-switch>
    <div class="call-type-box">
      <span>接听方式</span>
      <el-select v-model="loginType" @change="changeLoginType" size="mini" filterable placeholder="请选择" style="width:114px;margin-left:26px;">
        <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator'

@Component({ name: 'LoginDropdown' })
export default class LoginDropdown extends Vue {
  private loginType: string = 'WEBRTC'
  private showDropdrow: boolean = false
  private loginStatus: boolean = true
  private loginWebchatStatus: boolean = true
  private options: object[] = [
    { label: '手机模式', value: 'PSTN' },
    { label: '软电话', value: 'WEBRTC' },
    { label: 'SIP话机', value: 'SIP' }
  ]

  private clickFun (e) {
    if (!this.$el.contains(e.target)) {
      this.showDropdrow = false
    }
  }

  private open () {
    this.showDropdrow = true
  }

  @Emit()
  private changeLoginStatus (data: boolean) {
    return data
  }

  @Emit()
  private changeLoginType (data: string) {
    return data
  }

  private changeWebchatLoginStatus (data: string) {
    this.$emit('changeWebchatLoginStatus', data)
  }

  private beforeMount () {
    const value = window.localStorage.getItem('loginForm')
    let localForm = { loginStatus: true, loginType: 'WEBRTC' }
    if (value && value !== 'undefined' && value !== 'null') {
      localForm = JSON.parse(value)
    }
    if (localForm) {
      this.loginStatus = localForm.loginStatus
      this.loginType = localForm.loginType || 'WEBRTC'
    }
    document.addEventListener('click', this.clickFun)
  }

  private beforeDestroy () {
    document.removeEventListener('click', this.clickFun)
  }
}
</script>
<style lang="stylus" socpe>
  .login-dropdown
    width 220px
    height 190px
    background #fff
    padding 16px
    box-shadow 0px 4px 29px 0px rgba(155, 165, 172, 0.46)
    border-radius 4px
    position absolute
    right -40px
    top 24px
    z-index 2
    .webcahtStatus
      padding-bottom 16px
      border-bottom  1px solid #ECF0F3
      margin-bottom 16px
  .call-type-box
    margin-top 14px
  .switch-label
    line-height 2
</style>
